<template>
  <div class="r_box">
    <Box1_1 v-show="activeBox == 'box_1_1'" />
    <Box1_2 v-show="activeBox == 'box_1_2'" />
    <Box2_1 v-show="activeBox == 'box_2_1'" />
    <Box2_2 v-show="activeBox == 'box_2_2'" />
    <Box2_3 v-show="activeBox == 'box_2_3'" />
    <Box3_1 v-show="activeBox == 'box_3_1'" />
    <Box3_2 v-show="activeBox == 'box_3_2'" />
    <Box4_1 v-show="activeBox === 'box_4_1'" />
    <Box4_2 v-show="activeBox == 'box_4_2'" />
  </div>
</template>

<script setup>
import { ref, watch, defineProps } from 'vue';
import Box1_1 from './rightbox/box_1_1.vue';
import Box1_2 from './rightbox/box_1_2.vue';
import Box2_1 from './rightbox/box_2_1.vue';
import Box2_2 from './rightbox/box_2_2.vue';
import Box2_3 from './rightbox/box_2_3.vue';
import Box3_1 from './rightbox/box_3_1.vue';
import Box3_2 from './rightbox/box_3_2.vue';
import Box4_1 from './rightbox/box_4_1.vue';
import Box4_2 from './rightbox/box_4_2.vue';

const props = defineProps({
  activeBox: {
    type: String,
    required: true,
  }
});
</script>

<style scoped>
.r_box {
  width: 70vw;
  padding: 10px;
  overflow: hidden;
}

.r_box > div {
  font-size: 15px;
  padding: 1px;
  width: 100%;
  height: 100%;
}
</style>